{extend name="base" /}
{block name="body"}
<div class="layui-card">
    <div class="layui-card-body">
        <form action="{:request()->url()}" class="layui-form" method="post">
            <div class="layui-form-item">
                <label class="layui-form-label">手机号码</label>
                <div class="layui-input-block">
                    <input type="number" name="mobile" value="{$data.mobile|default=''}" autocomplete="off" placeholder="请输入手机号码" lay-verify="required|mobile" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-block">
                    <input type="text" name="name" value="{$data.name|default=''}" autocomplete="off" placeholder="请输入名称" lay-verify="required" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">所在省市</label>
                <div class="layui-input-block">
                    <input id="demoCascader1" name="shengshi" value="{$data.province|default=''},{$data.city|default=''},{$data.region|default=''}" placeholder="请选择" class="layui-hide"/>
                </div>
            </div>
            <div class="layui-form-item"> 
                <label class="layui-form-label">客户标签</label>
                <div class="layui-input-block">
                    <div id="otherXmSel" class="" ></div>
                    <input type="hidden" id="assist" name="tags" value="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">备注信息</label>
                <div class="layui-input-block">
                    <textarea name="remark" placeholder="" class="layui-textarea">{$data.remark|default=''}</textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <input name="province" type="hidden"><input name="city" type="hidden"><input name="region" type="hidden">
                    <button class="layui-btn" lay-filter="i" lay-submit="">保存</button>
                    <button class="layui-btn layui-btn-primary" type="reset">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>
{/block}
{block name="js"}
<script>
    layui.use(['xmSelect'], function () {
        var $ = layui.jquery;
        var xmSelect = layui.xmSelect;

        // 渲染多选下拉
        var otherXmSel = xmSelect.render({
            el: '#otherXmSel',
            filterable: true,
            paging: true,
            pageSize: 5,
            toolbar: {show: true},
            data: {:json_encode($tags)},
            on: function(data){
		//arr:  当前多选已选中的数据
		var arr = data.arr;
                //定义新的ID数组
                var id = new Array();
                //遍历所有值
		$.each(arr,function(index,r){
                    id[index] = r.name;
                });
                //数组转字符串
                new_id= id.join(",");
                //赋值
                $('#assist').attr('value',new_id);
                console.log(new_id)
            },
        });
        otherXmSel.setValue([{$data.tags|default=''}])
    });
</script>
<script type="text/javascript" src="/static/hqui/module/cascader/citys-data.js"></script>
<script>
    layui.use(['cascader'], function () {
        var $ = layui.jquery;
        var cascader = layui.cascader;
        var admin = layui.admin;
        
        // value也是中文而不是区号
        var data = cascader.getCityData(admin.util.deepClone(citysData));
        cascader.render({
            elem: '#demoCascader1',
            data: data
        });

    });
</script>
{/block}